{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>开关</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




<section><header><h3>普通示例</h3></header><article><div class="example">
  <div class="row">
    <div class="col-sm-4">
      <div style="border: 1px solid #ddd; padding: 10px">
        <div class="switch">
          <input type="checkbox">
          <label>夜间模式</label>
        </div>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc5k9a0fy"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>





<section><header><h3>对齐</h3></header><article><p>使用 <code>.text-left</code> 或 <code>.text-right</code> 来更改文字对齐方向。</p><div class="example">
  <div class="row">
    <div class="col-sm-4">
      <div style="border: 1px solid #ddd; padding: 10px">
        <div class="switch text-left">
          <input type="checkbox">
          <label>夜间模式</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div style="border: 1px solid #ddd; padding: 10px">
        <div class="switch text-right">
          <input type="checkbox">
          <label>夜间模式</label>
        </div>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch text-left"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch text-right"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>内联样式</h3></header><article><p>使用 <code>.switch-inline</code> 让 <code>.switch</code> 作为 <code>inline-block</code> 展示。</p><div class="example">
  <div class="switch switch-inline hl-warning">
    <input type="checkbox">
    <label>夜间模式</label>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch switch-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>




<section><header><h3>禁用</h3></header><article><p>为 <code>.switch</code> 添加 <code>.disabled</code> 类，或者为 <code>&lt;input&gt;</code> 添加 <code>[disabled]</code> 属性。</p><div class="example">
  <div class="row">
    <div class="col-sm-4">
      <div style="border: 1px solid #ddd; padding: 10px">
        <div class="switch disabled">
          <input type="checkbox" checked="">
          <label>夜间模式</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div style="border: 1px solid #ddd; padding: 10px">
        <div class="switch">
          <input type="checkbox" disabled="">
          <label>夜间模式</label>
        </div>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch disabled"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"switch"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">夜间模式</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}